<template>
    <div class='app-container'>
        <div class='title'>
            <!-- 
            <div class='lead'>
                <div class='leadin'>
                    <span>提交时间{{data.creationTime}}</span>
                    <span>提交人(登录名){{data.creatorUser}}</span>
                </div>
                <div class='leadin'>
                    <span>提交条数{{data.totalCount}}</span>
                    <span>提交状态成功提交{{data.succedCount}},失败{{data.failCount}},正在提交{{data.waitingCount}}</span>
                </div>
            </div> -->
            <div class='right-top'><div class='luru'>保单登记信息</div></div>
            <div class="unit-row">
              <div class="unit-text">
                <div class="unit-label">
                  提交时间：
                </div>
                <div class="unit-info">
                  {{data.creationTime}}
                </div>
              </div>
              <div class="unit-text">
                <div class="unit-label">
                  提交人(登录名)：
                </div>
                <div class="unit-info">
                  {{data.creatorUser}}
                </div>
              </div>
            </div>
            <div class="unit-row">
              <div class="unit-text">
                <div class="unit-label">
                  提交条数：
                </div>
                <div class="unit-info">
                  {{data.totalCount}}
                </div>
              </div>
              <div class="unit-text">
                <div class="unit-label">
                  提交状态：
                </div>
                <div class="unit-info">
                  进度{{data.succedCount + data.failedCount}}/{{data.totalCount}},成功提交{{data.succedCount}},失败{{data.failedCount}},
                </div>
              </div>
            </div>
        </div>
        <div class='table1'>
        <el-table :data="items1" style="width: 100%" class='table'>
            <el-table-column label="手机号" width="180">
              <template slot-scope='scope'>
                <p>{{scope.row.staffAccount}}</p>
                <p>{{scope.row.describe}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="身份证号"></el-table-column>
            <el-table-column  label="执行结果">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">
                        执行中
                    </span>
                    <span v-if="scope.row.state == 2">
                        成功
                    </span>
                    <span v-if="scope.row.state == 3">
                        {{errormessage}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="importDate" label="完成时间" width="200"></el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 3" >
                        <a @click="handleCommand" class='relead'>重新提交</a>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        </div>
         <div class='page-right'>
            <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>
           
        </div>
    </div>
</template>
<script>
    export default{
       data(){
        return {
            data:{},
            items1:null,
            pagetotal:null,
            currentPage:1,
            errormessage:'',
            currentid:''
        }
    },
    mounted(){
      this.transferlist()
       console.log(this.$route.params.id) 
    },
    methods:{
        transferlist(pageindex){
            let params={
                id:this.$route.params.id,
                pageIndex:pageindex,
            }
            console.log(this.$route.params.id)
            this.post(params,'services/app/applets/GetTransferBatchDetailList').then(rs=>{
                console.log(rs)
                let data = rs.result;
                let currentid=data.id
                this.currentid=currentid
                this.data = data;
                this.items1=rs.result.items;
                this.pagetotal=rs.result.totalCount;
                this.errormessage=rs.result.items.errorMsg
                if(pageindex){
                       this.currentPage= pageindex
                    }else{
                        this.currentPage=1
                    }
            })
        },
        handleCurrentChange(val){
            this.baodanlist(val)
        },
         handleCommand(){
            const me = this;
        this.$confirm('确定重新提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          // callback:function(elem) {
          //     console.log(elem)
          //     if(elem== 'cancel'){
          //       console.log("点击了取消不用操作")
          //     }else{
          //       let params={};
          //       me.post(
          //           params,
          //           "services/app/guaranteeSlip/GuaranteeSlipBatchList"
          //         ).then(rs => {
          //           if (rs.success) {
          //             me.$notify({
          //               title: '成功',
          //               message: '提交成功',
          //               type: 'success'
          //             });
          //           }
          //         })
          //     }
          // }
        })
        .then(() => {
            let params={
              id:this.currentid
            };
              this.post(
                params,
                "services/app/guaranteeSlip/UpdateBatchDetailState"
              ).then(rs => {
                if (rs.success) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success'
                  });
                  this.baodanlist(this.currentPage)
                }
              })
         
        })
        .catch(() => {
           this.$message({
            type: 'info',
            message: '已取消提交'
          });
        });
       }

 
    }
    
}
</script>
<style lang="scss" scoped>
    .title{
        margin: 25px;
        .right-top{
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #e7e7e7;
            position: relative;
            .luru{
                padding: 15px 0;
                color: #555;
                font-size: 18px;
            }
        }

        .unit-row {
            width: 100%;
            margin-bottom: 12px;
            margin-top: 15px;
            display: flex;
            .unit-text {
              flex: 1;
              line-height: 18px;
              .unit-label {
                color: #999;
                float: left;
              }
      .unit-info {
        color: #333;
        float: left;
      }
    }
    }}
    .table{
      p{
        margin:0;
      }
    }
    .table1{
      margin-left: 20px;
      margin-right: 20px;
    }
    .page-right{
        width: 100%;
        text-align: right;
        padding:52px 20px 20px 20px;
    }
    .relead{
      color: #027dea
    }
</style>